<div class="layui-fluid" id="app-vue" lay-title="管理员列表">
    <div class="layui-card">
        <div class="custom-header">
            <div class="custom-header-show">
                <div class="custom-header-left display-flex">
                    <div class="layui-inline nepadmin-mar-r30">
                        <el-button type="primary"  @click="handleCreate({})"><i class="el-icon-plus"></i>新增管理员</el-button>
                    </div>
                    <div class="layui-inline">
                        <el-input placeholder="关键字查询" v-model="listQuery.keyword">
                            <el-button size="small" type="primary"  slot="append"   @click="_initData(true)">搜索</el-button>
                        </el-input>
                    </div>
                </div>
            </div>
            <div class="custom-header-show">
                <div class="custom-header-left display-flex">
                    <div class="layui-inline nepadmin-mar-r30">
                        <el-button size="small" type="danger"  @click="handleTableCheckboxDelete('/admin/goods/sysManagerModel_dels')">批量删除</el-button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body" >
            <el-table :data="tableData" v-loading="table_loading" border stripe  height="calc(100vh - 320px)" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="tableSelectable"  width="55">
                </el-table-column>

                <el-table-column label="ID" prop="id" width="50"></el-table-column>

                <el-table-column label="角色" prop="role_name" show-overflow-tooltip min-width="120">
                    <template slot-scope="scope">
                        <my-el-table-column :row="scope.row"  prop="group_cate_id" :select-list="role_list" editor-mode="select" url='/admin/system/sysManagerModel_modInfo' :generate-req-obj="(data)=>onGenerateReqObj(data,'group_cate_id',scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column label="用户名" prop="name" show-overflow-tooltip min-width="180">
                    <template slot-scope="scope">
                        <my-el-table-column :row="scope.row" prop="name" url='/admin/system/sysManagerModel_modInfo'/>
                    </template>
                </el-table-column>
                <el-table-column label="帐号" prop="account" align="center" min-width="180">
                    <template slot-scope="scope">
                        <my-el-table-column :row="scope.row" prop="account" url='/admin/system/sysManagerModel_modInfo'/>
                    </template>
                </el-table-column>
                <el-table-column label="登录次数" prop="login_times" align="center" min-width="120"> </el-table-column>
                <el-table-column label="最后登录ip" prop="last_login_ip" align="center" min-width="120"> </el-table-column>

                <el-table-column label="状态" prop="status_name" align="center" width="100">
                    <template slot-scope="scope">
                        <my-switch-status
                                url='/admin/system/sysManagerModel_ModInfo'
                                :item="scope.row"
                        />

                    </template>
                </el-table-column>
                <el-table-column label="最后登录时间" prop="last_time" align="center" min-width="150"> </el-table-column>

                <el-table-column label="操作"  fixed="right" align="center" min-width="200">
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="handleCreate( scope.row)">编辑</el-button>
                        <my-btn-del
                                url='/admin/system/sysManagerModel_Del'
                                :id="scope.row.id"
                                :fnc="()=>tableData.splice(scope.$index,1)"
                        />
                    </template>
                </el-table-column>

            </el-table>


            <div class="page-container display-flex">
                <el-pagination  @current-change="handlePageChange" @size-change="handlePageSizeChange"  layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
            </div>
        </div>
    </div>

    <!--  添加产品新增   -->
    <create-manager ref="createManager" />
</div>

<script>

    layui.extend({
        createManager: 'views/system/components/createManager',
    }).use(['admin', 'conf','view', 'jquery','createManager','mySwitchStatus','myBtnDel','mixinsTableCheckbox'], function (admin, conf,view,$,createManager,mySwitchStatus,myBtnDel,mixinsTableCheckbox) {




        var app = new Vue({
            el: '#app-vue',
            components:{
                'my-switch-status' : mySwitchStatus,
                'my-btn-del' : myBtnDel,
                "create-manager":createManager,
            },
            data: {
                table_loading:false,
                total:0,
                tableData: [],
                select_list: [],
                role_list: [],
                listQuery:{
                    page:1,
                    keyword:''
                },
            },
            mixins:[mixinsTableCheckbox],
            created: function() {
                this._initData()
                this.getBaseInfo()
            },
            methods: {
                getBaseInfo:function(){
                    const that = this
                    admin.post({
                        url:'/admin/index/defInfo',
                        data:{type:'manager'},
                        success:function(res){
                            const data = res.data||{}
                            that.role_list = data.role_list||[]
                        }
                    })
                },
                _initData:function(is_reset){
                    if(is_reset===true){

                    }
                    const that = this
                    //开启table加载效果
                    this.table_loading = true
                    admin.post({
                        url:'/admin/system/sysManagerModel_lists'
                        ,data:this.listQuery
                        ,success: function (res) {
                            that.table_loading = false
                            var data = res.data || {}
                            that.tableData = data.list || []
                            that.total = data.total || 0
                        }
                        ,complete:function(){
                            console.log('complete')
                            that.table_loading = false
                        }
                    })
                },

                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this._initData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this._initData()
                },
                tableSelectable:function(row,index){
                    return row.is_special!==1
                },
                handleCreate:function(item) {
                    console.log(window)
                    this.$refs["createManager"].showDialog(item,this)
                    // window[window_components_add].showDialog(item)

                },
                onGenerateReqObj:function(data,field,row){
                    console.log(data,field,row)
                    var obj = {}
                    if(field==='group_cate_id'){
                        var arr = data.split(',')
                        obj['rid'] = arr[0]||'';
                        obj['rt_id'] = arr[1]||'';
                    }
                    return obj;
                }

            }
        })
    })

</script>